<script lang="ts" setup>
import { ref } from 'vue';
import { KeyValues, HttpMethod, ContentType, TableCellBtn } from '../../utils/types';
import { Plus } from '@element-plus/icons-vue'
import {  UiCellBtns } from '../../utils';

const cls="authentication-service"
const props = defineProps<{ modelValue: KeyValues }>()

const isTree = props.modelValue.isTree
const formData = props.modelValue.formData
const form = ref<KeyValues & { requestParams: KeyValues[] }>({
  requestParams: [],
  method: HttpMethod.GET
})

const addItem = () => {
  form.value.requestParams.push({})
}

const removeItem = (row: any) => {
  const arr =  form.value.requestParams
  arr.splice(arr.indexOf(row), 1)
}

const getBtns = (row: any) => {
  return { label: '删除', onClick: removeItem.bind(null, row) } as TableCellBtn
}

const onMethodChange = (v: any) => {
  if (v === HttpMethod.GET) {
    form.value = { ...form.value, requstType: undefined }
  }
}
const getOptions = (row)=>{
  const options = (() => {
    switch (row.position) {
      case '0':
        return formData.requestHeader
      case '1':
        return formData.requestBody
      case '3':
        return [ ...formData.servicePath, ...formData.serviceParam ]
    }
  })()
  return options
}
const handleChange =( v )=>{

}

defineExpose< { getForm: () => KeyValues }>({
  getForm: () => form.value
})
</script>

<template>
  <ElForm ref="formRef" label-width="8em" label-suffix=" :" :model="form" >
    <ElFormItem label="服务类型">HTTP&HTTPS</ElFormItem>
    <ElFormItem label="服务地址" prop="url">
      <ElInput v-model="form.url" placeholder="请输入服务地址"/>
    </ElFormItem>
    <ElFormItem label="请求方式">
      <ElRadioGroup v-model="form.requestMethod" @change="onMethodChange">
        <ElRadio :label="HttpMethod.GET" />
        <ElRadio :label="HttpMethod.POST" />
      </ElRadioGroup>
    </ElFormItem>
    <ElFormItem v-if="form.requestMethod === HttpMethod.POST" label="请求格式">
      <ElRadioGroup v-model="form.requestContentType">
        <ElRadio :label="ContentType.FORM" />
        <ElRadio :label="ContentType.JSON" />
      </ElRadioGroup>
    </ElFormItem>
    <ElFormItem label="入参定义">
      <div :class="cls">
        <ElTable :data="form.requestParams">
          <ElTableColumn label="参数来源" min-width="140">
            <template v-slot="{ row }">
              <ElSelect v-model="row.source">
                <ElOption value="0" label="前端请求" />
                <ElOption value="1" label="常量"/>
              </ElSelect>
            </template>
          </ElTableColumn>
          <ElTableColumn label="位置" min-width="120">
            <template v-slot="{ row }">
              <ElSelect v-model="row.position">
                <ElOption value="0" label="header"/>
                <ElOption value="1" label="body"/>
                <ElOption value="3" label="query param"/>
              </ElSelect>
            </template>
          </ElTableColumn>
          <ElTableColumn label="参数名" min-width="120">
            <template v-slot="{ row }">
              <ElCascader v-model="row.name" :options="getOptions( row )"  @change="handleChange" v-if="isTree&& row.position==='1'"/>
              <ElSelect v-model="row.name"  v-else>
                <ElOption v-for="(_, i) in getOptions(row)" :value="_.param" :label="_.param" />
              </ElSelect>
            </template>
          </ElTableColumn>
       
          <ElTableColumn label="值" min-width="120">
            <template v-slot="{ row }">
              <ElInput v-model="row.value" placeholder="请输入" />
            </template>
          </ElTableColumn>
          <ElTableColumn label="操作" width="80" fixed="right">
            <template v-slot="{ row }">
              <UiCellBtns :btns="getBtns(row)" />
            </template>
          </ElTableColumn>
        </ElTable>
        <div :class="`${cls}_actions`">
          <ElButton :icon="Plus" type="primary" plain @click="addItem">添加一行</ElButton>
        </div>
      </div>
    </ElFormItem>
    <ElFormItem label="提取结果参数">
      <ElInput v-model="form.tokenField">
        <template #prepend>
          <ElSelect style="width: 100px;" v-model="form.tokenPosition">
            <ElOption value="cookie" label="cookie"/>
            <ElOption value="head" label="head"/>
            <ElOption value="body" label="body"/>
          </ElSelect>
        </template>
      </ElInput>
    </ElFormItem>
      <ElFormItem label="过期时间" prop="expireTime">
        <ElInput v-model="form.expireTime" placeholder="请输入过期时间">
          <template #append>秒</template>
        </ElInput>
    </ElFormItem>
  </ElForm>
</template>
